<template>
	<view class="pagesContent">
		<view class="pagesContentView">			
			<view class="item " @click="goPage('/pages/user/bindMobile' , null)" v-if="userInfo.need_bind_username">绑定手机号码</view>
			<view class="item red" @click="delete_"> 注销账号 </view>
			<view class="item blue" @click="out">退出登录</view>
			<view class="adBox">
				<adView></adView>
			</view>
		</view>

		<uni-popup ref="popup_delAccount" type="center" :is-mask-click="isMaskClick"
			:mask-background-color="maskBackgroundColor">
			<view class="popup_delAccount_content">

				<view class="popup__delAccount">
					<text v-if="delType == 'out'">确定退出当前帐号吗？</text>
					<text v-if="delType == 'del'">帐号注销后所有数据无法恢复，<br />确定注销当前帐号吗？</text>
				</view>
				<view class="btn">
					<uni-row>
						<uni-col :span="12">
							<view class="popup_btn" @click="confirmDelAccount">确定</view>
						</uni-col>
						<uni-col :span="12">
							<view class="popup_btn popup_btn_disable" @click="cancelDel">取消</view>
						</uni-col>
					</uni-row>


				</view>
			</view>
		</uni-popup>




	</view>
</template>
<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';

	export default {

		data() {
			return {
				isMaskClick: false,
				maskBackgroundColor: "rgba(0,0,0,0.3)",
				delType: null,

			}
		},
		onShow() {
			console.log(this.userInfo)
		},
		computed: {
			...mapGetters(["appMessage", "userInfo"])
		},
		methods: {
			...mapMutations(['logout', 'updatelogin', "updateUserInfo", "updateToken", "updataAdSwitch", "updataDeviceId",
				"updataOaid"
			]),
			modification() {
				this.goPage("/pages/user/resetPassword")
			},
			out() {
				this.delType = 'out'
				this.$refs.popup_delAccount.open()
			},
			delete_() {
				this.delType = 'del'
				this.$refs.popup_delAccount.open()
			},
			confirmDelAccount() {
				let this_ = this
				switch (this.delType) {
					case "del":
						this_.$http.post("/api/user/deleteUser", {}).then((res) => {
							if (res.code == 0) {
								this_.$refs.popup_delAccount.close()
								this_.text("注销成功")
								this_.logout()
								uni.removeStorageSync("token")
								uni.removeStorageSync("userSetAdSwitch")
								this_.goReLaunch("/pages/user/login")
							} else {
								this_.text(res.msg)
							}
						})
						break;
					case "out":
						this_.$refs.popup_delAccount.close()
						console.log("退出")
						this.logout()
						uni.removeStorageSync("token")
						uni.removeStorageSync("userSetAdSwitch")
						this.updataAdSwitch(true)
						this.goReLaunch("/pages/user/login")
						break;
				}
			},
			cancelDel() {
				this.$refs.popup_delAccount.close()
			},

		}
	}
</script>
<style lang="scss" scoped>
	.pagesContent {
		position: fixed;
		top: 40rpx;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 48rpx 48rpx 0 0;
		background: #FFFFFF;
		box-shadow: 0px 0px 32rpx 0px rgba(51, 114, 251, 0.27);
		border-radius: 48rpx 48rpx 0px 0px;
		overflow: hidden;

		.pagesContentView {
			position: relative;
			border-radius: 48rpx 48rpx 0 0;
			width: 100%;
			height: 100%;
			padding-top: 58rpx;
		}
	}

	.item {
		width: 686rpx;
		height: 98rpx;
		background: #EEF3FF;
		border-radius: 20rpx;
		margin: 0 auto 60rpx;
		text-align: center;
		line-height: 98rpx;
		font-size: 28rpx;
	}

	.red {
		background: linear-gradient(0deg, #FF0506, #FF3040);
		color: #FFFFFF;
	}

	.blue {
		background: linear-gradient(0deg, #1073F9, #3A8CFA);
		color: #FFFFFF;
	}

	.adBox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 240rpx;
	}

	.popup_delAccount_content {
		width: 567rpx;
		height: 270rpx;
		padding-top: 225rpx;
		background: url(../../static/images/loginBg.png) center center no-repeat;
		background-size: 100% 100%;

		.popup__delAccount {
			width: 398rpx;
			font-size: 28rpx;

			font-weight: 600;
			color: #1073F9;
			line-height: 48rpx;
			margin: 0 auto 54rpx;
			text-align: center;


		}

		.btn {
			padding: 0 32rpx;			

			.popup_btn {
				width: 220rpx;
				height: 72rpx;
				background: #ffffff;
				border-radius: 10rpx;
				margin: 0 auto;
				color: #1073F9;
				font-size: 28rpx;				
				font-weight: 600;
				text-align: center;
				line-height: 72rpx;
				border: 2rpx solid #1073F9;
				
			}

			.popup_btn_disable {
				background: linear-gradient(0deg, #1073F9, #3A8CFA);								
				color: #FFFFFF;								
				
			}
		}

	}
</style>